<template>
  <div class="sti-ffWoodArea-container">
    <div class="sti-ffWoodArea-chart" id="sti-ffWoodArea-chart"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'components-stiffWoodArea',
  props: ['dataValue'],
  data() {
    return {
      arrAreaData: []
    }
  },
  methods: {
    getData() {
      this.setOption()
    },
    setOption() {
      let myChart = echarts.init(document.getElementById('sti-ffWoodArea-chart'))
      let formatUtil = echarts.format
      let option = {
        tooltip: {
          formatter: function(info) {
            let value = info.value
            let treePathInfo = info.treePathInfo
            let treePath = []
            for (let i = 1; i < treePathInfo.length; i++) {
              treePath.push(treePathInfo[i].name)
            }
            return [
              '<div class="tooltip-title">' + formatUtil.encodeHTML(treePath.join('/')) + '</div>',
              '数量: ' + formatUtil.addCommas(value)
            ].join('')
          }
        },
        color: ['#285FA0', '#0E575E', '#0A3265', '#2F7696', '#2391A0', '#2A5CA3', '#134381', '#11545C', '#8D4C62', '#8B7E6E'],
        series: [{
          type: 'treemap',
          data: this.arrAreaData,
          nodeClick: false,
          levels: [
          {
            itemStyle: {
              normal: {
                borderColor: 'rgba(0, 0, 0, 0)',
                gapWidth: 3
              }
            }
          }
        ],
          breadcrumb: {
            show: false
          },
          roam: false
        }]
      }
      myChart.setOption(option)
      myChart.resize()
    }
  },
  mounted() {
    this.getData()
  },
  created() {
    this.arrAreaData = this.dataValue.slice(0, 10)
  }
}
</script>

<style lang="less">
.sti-ffWoodArea-container {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
  .sti-ffWoodArea-chart {
    width: 100%;
    height: 100%;
  }
}
</style>
